<template>
    <view class="area-picker">
        <view class="search-bar">
            <input type="text" placeholder="输入城市名称搜索" v-model="searchText" class="search-input" />
        </view>
        <view class="tabs">
            <view v-for="(tab, idx) in visibleTabs" :key="idx" :class="['tab', currentTab === idx ? 'active' : '']"
                @click="switchTab(idx)">
                {{ tab }}
            </view>
        </view>
        <view class="options">
            <view v-if="currentOptions.length === 0" class="option-empty">暂无数据</view>
            <view v-else v-for="item in currentOptions" :key="item.value"
                :class="['option', selectedCodes[currentTab] === item.value ? 'selected' : '']"
                @click="selectOption(item.value)">
                {{ item.text }}
            </view>
        </view>
        <view v-if="selectedNames.length === 3" class="result">
            {{ selectedNames.join(' ') }}
        </view>
    </view>
</template>

<script>
import aCityData from './index.js';

export default {
    name: 'Picker',
    data() {
        return {
            aCityData,
            currentTab: 0,
            selectedCodes: ['', '', ''],
            selectedNames: [],
            tabTitles: ['省', '市', '区'],
            searchText: ''
        };
    },
    computed: {
        visibleTabs() {
            return this.tabTitles.filter((tab, idx) => {
                if (idx === 0) return true;
                if (idx === 1 && this.selectedCodes[0]) return true;
                if (idx === 2 && this.selectedCodes[1]) return true;
                return false;
            });
        },
        currentOptions() {
            let options = [];
            // 搜索逻辑
            if (this.searchText) {
                // 搜索省
                options = this.aCityData.filter(item => item.text && item.text.includes(this.searchText));
                if (options.length > 0) {
                    this.currentTab = 0;
                    return options;
                }
                // 搜索市
                let cityList = [];
                this.aCityData.forEach(province => {
                    if (province.children) {
                        cityList = cityList.concat(province.children.map(city => ({ ...city, _province: province })));
                    }
                });
                options = cityList.filter(item => item.text && item.text.includes(this.searchText));
                if (options.length > 0) {
                    this.currentTab = 1;
                    this.selectedCodes[0] = options[0]._province.value;
                    return options;
                }
                // 搜索区
                let areaList = [];
                cityList.forEach(city => {
                    if (city.children) {
                        areaList = areaList.concat(city.children.map(area => ({ ...area, _province: city._province, _city: city })));
                    }
                });
                options = areaList.filter(item => item.text && item.text.includes(this.searchText));
                if (options.length > 0) {
                    this.currentTab = 2;
                    this.selectedCodes[0] = options[0]._province.value;
                    this.selectedCodes[1] = options[0]._city.value;
                    return options;
                }
                // 没有结果
                return [];
            }
            // 非搜索时，按tab正常展示
            if (this.currentTab === 0) {
                options = this.aCityData;
            } else if (this.currentTab === 1 && this.selectedCodes[0]) {
                const province = this.aCityData.find(p => p.value === this.selectedCodes[0]);
                options = province ? province.children : [];
            } else if (this.currentTab === 2 && this.selectedCodes[0] && this.selectedCodes[1]) {
                const province = this.aCityData.find(p => p.value === this.selectedCodes[0]);
                const city = province.children.find(c => c.value === this.selectedCodes[1]);
                options = city ? city.children : [];
            }
            return options;
        }
    },
    methods: {
        switchTab(idx) {
            this.currentTab = idx;
        },
        selectOption(code) {
            let options = this.currentOptions;
            if (options.length === 0) return;
            if (this.searchText) {
                // 搜索时选中省/市/区
                if (this.currentTab === 0) {
                    this.selectedCodes = [code, '', ''];
                    const province = this.aCityData.find(p => p.value === code);
                    this.selectedNames = [province.text];
                    if (province.children && province.children.length) {
                        this.currentTab = 1;
                    }
                } else if (this.currentTab === 1) {
                    const city = options.find(c => c.value === code);
                    this.selectedCodes[0] = city._province.value;
                    this.selectedCodes[1] = code;
                    this.selectedCodes[2] = '';
                    this.selectedNames = [city._province.text, city.text];
                    if (city.children && city.children.length) {
                        this.currentTab = 2;
                    }
                } else if (this.currentTab === 2) {
                    const area = options.find(a => a.value === code);
                    this.selectedCodes[0] = area._province.value;
                    this.selectedCodes[1] = area._city.value;
                    this.selectedCodes[2] = code;
                    this.selectedNames = [area._province.text, area._city.text, area.text];
                }
                this.searchText = '';
                return;
            }
            // 非搜索时选中逻辑
            if (this.currentTab === 0) {
                this.selectedCodes = [code, '', ''];
                const province = this.aCityData.find(p => p.value === code);
                this.selectedNames = [province.text];
                if (province.children && province.children.length) {
                    this.currentTab = 1;
                }
                this.searchText = '';
            } else if (this.currentTab === 1) {
                const province = this.aCityData.find(p => p.value === this.selectedCodes[0]);
                const city = province.children.find(c => c.value === code);
                this.selectedCodes[1] = code;
                this.selectedCodes[2] = '';
                this.selectedNames = [province.text, city.text];
                if (city.children && city.children.length) {
                    this.currentTab = 2;
                }
                this.searchText = '';
            } else if (this.currentTab === 2) {
                const province = this.aCityData.find(p => p.value === this.selectedCodes[0]);
                const city = province.children.find(c => c.value === this.selectedCodes[1]);
                const area = city.children.find(a => a.value === code);
                this.selectedCodes[2] = code;
                this.selectedNames = [province.text, city.text, area.text];
                this.searchText = '';
            }
        }
    }
};
</script>

<style scoped>
.area-picker {
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    width: 350px;
    margin: 0 auto;
}

.search-bar {
    margin-bottom: 10px;
}

.search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #eee;
    border-radius: 6px;
    font-size: 15px;
}

.tabs {
    display: flex;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
}

.tab {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 16px;
    color: #888;
    cursor: pointer;
    position: relative;
}

.tab.active {
    color: #2979ff;
    font-weight: bold;
    border-bottom: 2px solid #2979ff;
}

.options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.option {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 15px;
    color: #333;
    cursor: pointer;
    margin-bottom: 8px;
    transition: all 0.2s;
    width: 22%;
}

.option.selected {
    background: #2979ff;
    color: #fff;
    border-color: #2979ff;
}

.option-empty {
    width: 100%;
    text-align: center;
    color: #bbb;
    padding: 20px 0;
    font-size: 16px;
}

.result {
    margin-top: 16px;
    color: #2979ff;
    font-weight: bold;
    text-align: center;
}
</style>